// JavaScript Document
var canvasb = document.getElementById('canvas_b');
var contextb = canvasb.getContext('2d');
var dragCircles = [];

function Circle(x,y){
	this.x = x;
	this.y = y;
	this.r = 25;
	this.color = get_random_color();
	this.velocity = 3 * Math.random() + 1; // 5 pixels per 1/30 sec in Y direction| velocity = displacement/time
	
}

Circle.prototype.Travel = function(cnv){
	if(cnv.height - this.r > this.y){
		this.y += this.velocity;
	}else{
		this.y = cnv.height - this.r;
	}
}

canvasb.onclick = function(e){
	var loc = windowToCanvas(canvasb, e.clientX, e.clientY);	
	dragCircles.push(new Circle(loc.x, loc.y));
}

function drawDragCircles(){
	contextb.clearRect(0,0,canvasb.width, canvasb.height);	
	//alert('calling');		
	for(i=0; i < dragCircles.length; i++){
		dragCircles[i].Travel(canvasb);				
		contextb.beginPath();
		contextb.arc(dragCircles[i].x,dragCircles[i].y,dragCircles[i].r,0,2 * Math.PI,false);
		contextb.fillStyle = dragCircles[i].color;
        contextb.fill();
        contextb.lineWidth = 1;
        contextb.strokeStyle = "black";
        contextb.stroke();
	}
}

setInterval(drawDragCircles, 1000/30);